<template>
    <div class="wrap">
        <ul class="d-u1">
            <li><a href="javascript:history.go(-1)"><img src="static/images/idid_ie3wmnbvgftginzsmizdambqgayde_35x52.png" alt=""></a></li>
            <li>订单确认</li>
            <li @click="Go">我的订单</li>
        </ul>
        <ul class="d-u2">
            <li>收货地址：北京市昌平区西三旗物美大卖场</li>
            <li><img src="static/images/idid_ie3wmnbvgftginzsmizdambqgayde_35x52.png" alt=""></li>
        </ul>
        <ul class="d-u3">
            <li>
                <p>美丽优选</p>
                <p class="call">联系商家</p>
            </li>
            <li class="shop" v-for="(x,index) in items" :key="index">
                <img :src="x.img" alt="">
                <div class="mes">
                    <p>{{x.title}}</p>
                    <p><span>颜色：{{x.style}}</span><span>规格：{{x.size}}</span></p>
                    <p>￥{{x.lowPrice}}</p>
                </div>
            </li>
            <li>
                <p>配送方式</p>
                <p>无</p>
            </li>
            <li>
                <p>快递运费</p>
                <p>￥0.00</p>
            </li>
            <li>
                <p>价格合计</p>
                <p>￥{{price}}</p>
            </li>
        </ul>
        <div class="d1">
            <span>！</span><b>不要相信任何人通过短信、QQ发送所谓的"退款连接"</b>
        </div>
        <div class="d2">
            <span>应付款：￥{{price}}</span><b>订单确认</b>
        </div>
    </div>
</template>
<script>
    import {mapActions,mapGetters} from 'vuex'
    export default{
        computed:{
            items(){
                return this.$store.getters.dingdan;
            },
            price(){
                return this.$store.getters.price;
            }
        },
        methods:{
            Go(){
                location.href = "/#/mine"
            }
        }
    }
</script>
<style scoped>
    .wrap{
        background: #eee;
        width:100vw;
        height:100vh;
    }
    .d-u1{
        width:100vw;
        height:2.5rem;
        background: #fff;
        display: flex;
        flex-flow:wrap row;
        justify-content:space-around;
        align-items: center;
        font-size: .7rem;
    }
    .d-u1 img{
        width:.5rem;
    }
    .d-u1 li:nth-child(2){
        margin-left:2rem;
    }
    .d-u2{
        width:100vw;
        padding:.8rem .5rem;
        margin:.5rem 0;
        background: #fff;
        display: flex;
        flex-flow:wrap row;
        justify-content:space-between;
        align-items: center;
        font-size: .7rem; 
        border-top:.2rem dashed #f2b7cb;
        border-bottom:.2rem dashed #f2b7cb;
    }
    .d-u2 img{
        width:.6rem;
        transform: rotate(180deg);
    }
    .d-u3{
        width:100vw;
        padding:0 .5rem;
        background: #fff;
    }
    .call{
        border:.05rem solid #ff6699;
        padding:.2rem .5rem;
        border-radius: .2rem;
        color:#ff6699;
    }
    .d-u3 li{
        width:100%;
        padding:.5rem 0;
        border-bottom: .1rem solid #eee;
        display: flex;
        flex-flow:wrap row;
        justify-content:space-between;
        align-items: center;
        font-size:.6rem;

    }
    .d-u3 .shop img{
        width:20%;
    }
    .d-u3 .shop .mes{
        width:70%;
        line-height: 1.2rem;
    }
    .d-u3 .shop .mes p:first-child{
        overflow:hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .d-u3 li:last-child p:last-child{
        color:#ff6699;
    }
    .d1{
        text-align: center;
        padding:.5rem 0;
        margin-top: .5rem;
        background: #fff;
        font-size: .6rem;
        border-bottom: .1rem solid #eee;
    }
    .d1 span{
        display: inline-block;
        width:.9rem;
        height:.9rem;
        border-radius: 50%;
        border:.05rem solid red;
        color:red;
    }
    .d2{
        width:100vw;
        text-align:center;
        padding:1rem 0;
        background: #fff;
        font-size: .7rem;
        position:relative;
    }
    .d2 b{
        display: inline-block;
        margin-left: 1rem;
        background: #ff2f66;
        padding:.5rem 1rem;
        color:#fff;
        border-radius: .2rem;
    }
</style>